<template>
    <el-form :model="filterForm" label-width="120px" class="product-filter">
      <!-- 一级品牌 -->
      <el-form-item label="一级品牌">
        <el-select v-model="filterForm.brandName" placeholder="请选择一级品牌" @change="onBrandChange">
          <el-option
            v-for="brand in brands"
            :key="brand.id"
            :label="brand.name"
            :value="brand.name"
          />
        </el-select>
      </el-form-item>
  
      <!-- 二级品牌 -->
      <el-form-item label="二级品牌">
        <el-select v-model="filterForm.subBrandName" placeholder="请选择二级品牌" :disabled="!filterForm.brandName">
          <el-option
            v-for="subBrand in subBrands"
            :key="subBrand.id"
            :label="subBrand.name"
            :value="subBrand.name"
          />
        </el-select>
      </el-form-item>
  
      <!-- 价格区间 -->
      <el-form-item label="价格区间">
        <el-row :gutter="10">
          <el-col :span="11">
            <el-input-number
              v-model="filterForm.minPrice"
              placeholder="最低价"
              :min="0"
              style="width: 100%;"
            />
          </el-col>
          <el-col :span="2" class="price-separator">-</el-col>
          <el-col :span="11">
            <el-input-number
              v-model="filterForm.maxPrice"
              placeholder="最高价"
              :min="0"
              style="width: 100%;"
            />
          </el-col>
        </el-row>
      </el-form-item>
  
      <!-- 筛选按钮 -->
      <el-form-item>
        <el-button type="primary" @click="applyFilter">筛选</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  import { ref, reactive } from 'vue';
  
  export default {
    props: {
      brands: {
        type: Array,
        required: true,
      },
    },
    emits: ['onFilter'],
    setup(props, { emit }) {
      // 筛选表单数据
      const filterForm = reactive({
        brandName: '', // 一级品牌名
        subBrandName: '', // 二级品牌名
        minPrice: null, // 最低价
        maxPrice: null, // 最高价
      });
  
      // 二级品牌列表
      const subBrands = ref([]);
  
      // 当一级品牌变化时，更新二级品牌选项
      const onBrandChange = (brandName) => {
        const selectedBrand = props.brands.find((brand) => brand.name === brandName);
        subBrands.value = selectedBrand ? selectedBrand.children : [];
        filterForm.subBrandName = ''; // 重置二级品牌选择
      };
  
      // 应用筛选
      const applyFilter = () => {
        emit('onFilter', { ...filterForm });
      };
  
      // 重置筛选条件
      const resetFilter = () => {
        filterForm.brandName = '';
        filterForm.subBrandName = '';
        filterForm.minPrice = null;
        filterForm.maxPrice = null;
        subBrands.value = [];
        emit('onFilter', { ...filterForm });
      };
  
      return {
        filterForm,
        subBrands,
        onBrandChange,
        applyFilter,
        resetFilter,
      };
    },
  };
  </script>
  
  <style scoped>
  .product-filter {
    margin-bottom: 20px;
  }
  .price-separator {
    text-align: center;
    line-height: 32px;
  }
  </style>
  